<template>
  <div>
    <div ref="leftBelow" class="base" id="data"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "OneColumnBelowBox",
  props: {
    sixHours: {
      type: Array,
      default: () => []
    },
    sixHoursBrowseNumber: {
      type: Array,
      default: () => []
    },
    sixHoursPersonBrowseNumber: {
      type: Array,
      default: () => []
    },
    leftBelowBoxHeight: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      data: {
        myChart: ''
      }
    }
  },
  watch: {
    leftBelowBoxHeight: {
      handler(val) {
        this.$refs.leftBelow.style.height = this.leftBelowBoxHeight + 'px';
        this.bigGraphShowTop15();
      }
    }
  },
  mounted() {
    this.bigGraphShowTop15();
  },
  methods: {
    bigGraphShowTop15() {
      this.$refs.leftBelow.style.height = this.leftBelowBoxHeight + 'px';
      const option = {
        title: {
          left: 'center',
          text: '数据趋势',
          textStyle: {
            color: '#ffffff',
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: 0,
          right: 0,
          orient: 'vertical',
          data: ['浏览次数', '浏览人数'],
          textStyle: {
            fontSize: 14,
            color: '#ffffff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.sixHours,
          splitLine: {
            //网格线
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#416ab8',
              width: '2'
            }
          },
          axisLabel: {
            fontSize: '16',
            showMaxLabel: true
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            //网格线
            show: false
          },
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 26
          },
          axisLine: {
            lineStyle: {
              color: '#416ab8',
              width: '2'
            }
          },
          axisLabel: {
            fontSize: '16',
            fontWeight: 'bold',
            showMaxLabel: true
          }
        },
        series: [
          {
            name: '浏览次数',
            type: 'line',
            stack: 'Total',
            data: this.sixHoursBrowseNumber,
            itemStyle: {
              normal: {
                color: '#00ffff',
              }
            }
          },
          {
            name: '浏览人数',
            type: 'line',
            stack: 'Total',
            data: this.sixHoursPersonBrowseNumber,
            itemStyle: {
              normal: {
                color: '#dc28ec',
              }
            }
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("data"));
      this.myChart.setOption(option);
      this.myChart.resize();
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  }
}
</script>

<style scoped lang="scss">
.base {
  padding: 30px 10px 10px 0;
  width: 100%;
}
</style>
